<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.active{
				background: red;
				color: #fff;
			}
		</style>
		<script src="../js/vue.js"></script>
		<link href="Animate.css" rel="stylesheet" />
	</head>
	<body>
		
		
		<div id="app">
			<!-- <component is="list"></component> -->
			<!-- <component :is="current" ></component> -->
			
			<p>
				<button @click="current='home'"  :class="{active:current=='home'}"  >首页</button>
				<button @click="current='list'"  :class="{active:current=='list'}"  >列表页</button>
				<button @click="current='detail'"  :class="{active:current=='detail'}"  >详情页</button>
			</p>
			
			<transition enter-active-class="animate__animated animate__fadeInLeft"  leave-active-class="animate__animated animate__fadeOutRight">
			    <component :is="current"></component>
			</transition>
		</div>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				current:'home'
			},
			components:{
				home:{
					template:"<div><h3>我是首页</h3></div>"					
				},
				list:{
					template:"<div><h3>我是列表页</h3></div>"					
				},
				detail:{
					template:"<div><h3>我是详情页</h3></div>"					
				}
			}
		})
	</script>	
	</body>
</html>
